/* 
类组件状态：
  1. 创建：写到 state 对象中，并设置变量初始值
  2. 使用：通过 this.state.xxx 访问
  3. 修改：通过 this.setState({ xxx })

类组件生命周期：
  1. 挂载时
  2. 更新时
  3. 卸载时



函数组件作用(类组件叫生命周期)：
  1. 挂载时
    useEffect(() => {  }, []);
  2. 更新时
  3. 卸载时
*/


import React, { useState } from 'react';
import { useEffect } from "react";

// 函数式组件
function App() {
  const [count, setCount] = useState(100);

  useEffect(() => {
    setTimeout(() => {
      console.log('数据获取成功');
    }, 1000);
  }, []);

  console.log('effect外面代码');

  return <div>
    {count}
    <button onClick={() => setCount(count + 1)}>修改状态</button>
  </div>;
}

export default App;



// 类组件的写法;
// class App extends React.Component {
//   state = {
//     count: 0
//   };
//   componentDidMount() {

//   }
//   render() {
//     return (
//       <div className="App">
//         {this.state.count}
//         <button onClick={() => this.setState({ count: this.state.count + 1 })}>修改状态</button>
//       </div>
//     );
//   }
// }
// export default App;
